<template>
	<view class="opinion-container">
		<view class="form-item">
			<view class="form-item-label">
				意见反馈：
			</view>
			<textarea v-model.trim="content" placeholder="请输入您要反馈的问题" maxlength="200" />
			<uni-icons type="close" size="20" v-show="content.length>0" @click="content=''"
				color="#6c757d" />
			<text class="content-len">{{content.length}}/200</text>
		</view>
		<view class="form-item">
			<view class="form-item-label">
				反馈图片：
			</view>
			<uni-file-picker v-model="images" file-mediatype="image" mode="grid" limit="3"
				@select="select" :auto-upload="false" />
		</view>
		<button class="submit-btn" type="warn" @click="submit">提交反馈意见</button>
		</uni-forms>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
				images: [],
				images_src: []
			}
		},
		methods: {
			select(e) {
				e.tempFiles.forEach(item => {
					this.images_src.push(new Promise(async (resovle, reject) => {
						try {
							const {
								fileID
							} = await uniCloud.uploadFile({
								cloudPath: item.name, // 文件名
								filePath: item.path // 文件路径
							})
							resovle(fileID)
						} catch (e) {
							reject(e)
						}
					}))
				})
			},
			async submit() {
				if (this.content) {
					uni.showLoading()
					const image_list = await Promise.all(this.images_src)
					const msg = await this.$http.add_feedback({
						user_id: this.user_info._id,
						content: this.content,
						image_list
					})
					uni.showToast({
						title: msg,
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} else {
					uni.showToast({
						title: '请填写反馈内容',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.opinion-container {
		padding: 0 20rpx;

		.form-item {
			position: relative;

			.form-item-label {
				margin: 20rpx 0;
			}

			textarea {
				border: 1px solid #ccc;
				border-radius: 10rpx;
				width: 100%;
				padding: 10rpx;
				box-sizing: border-box;
			}

			.textarea-placeholder {
				font-size: 26rpx;
			}

			.uniui-close {
				position: absolute;
				top: 50%;
				right: 10rpx;
			}

			.content-len {
				position: absolute;
				right: 14rpx;
				bottom: 14rpx;
				color: $secondary;
				font-size: 26rpx;
			}
		}

		.submit-btn {
			margin-top: 50rpx;
		}
	}
</style>
